<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Meteocal</title>
<link href="../css/notification_page.css" rel="stylesheet" type="text/css" />
</h:head>

    <h:body style="background-color:#81a4c7" onload="#{notificationView.updateView()}">
	<div id="wrap">
    	<div id="header">
            <a href="user_home3.xhtml"><img src="./../images/Logo.png" style="width:150px; height:150px;" /></a>
            <div style="float:right;">
                <div>
                    <p:commandButton value="Log out" style="width: 100px; border:0; box-shadow:0px 2px 5px #000000; 
                                             float: right; margin-left: 20px; margin-top: 10px; background: #6cb364; color: white; font-family: Comic Sans MS;" 
                                             action="#{loginBean.logout()}" />
                    <h:form style="float: left"><p:commandLink action="#{loginBean.logout()}"></p:commandLink></h:form>
                </div>
                <div style="float:right; ">
                    <h:form>
                        <p:inputText id="title" value="#{searchBean.parameter}" style="margin-top: 80px;" required="true"/>
                        <p:commandButton value="Search users" action="#{searchBean.resultUrl()}" style=" border:0; box-shadow:0px 2px 5px #000000; 
                              float: left; margin-left: 10px; margin-top: 76px; background: #6cb364; color: white; font-family: Comic Sans MS;" />
                    </h:form>
                </div>
            </div>
        </div>
        <div id="central">
            <div id="calendar_area">
                <div id="calendar_container">
                    <div id="calendar_header">
                        <h1>Your notifications</h1>
                    </div>
                    <h:form id="form">
                        <h:panelGrid columnClasses="value" style="width: 600px; margin-left: auto; margin-right: auto;" >
                            <p:dataList value="#{notificationView.myNotifications}" var="notification" type="unordered" itemType="none" paginator="true" rows="10" styleClass="paginated">          
                            <p:commandLink  update=":form:eventDetails" title="View Detail" oncomplete="PF('eventDialog').show()" styleClass="ui-icon ui-icon-search" style="float:left;margin-right:10px">
                                <f:setPropertyActionListener value="#{notification}" target="#{notificationView.selectedNotification}" />
                                <h:outputText value="#{notification.text}, #{notification.timestamp}" />
                            </p:commandLink>
                                <h:outputText value="#{notification.text}, #{notification.timestamp}" style="display:inline-block"/>
                        </p:dataList>
                        </h:panelGrid>


                        <p:dialog widgetVar="eventDialog" showEffect="clip" hideEffect="clip" resizable="false" style="" >
                            <div id="not_container">
                                <div id="not_header">
                                    <h1>Event details</h1>
                                </div>
                                <h:panelGrid id="eventDetails" columns="1" style="text-align: left; margin-bottom: 10px;">
                                    <h:panelGrid columns="2">
                                        <h:panelGrid columns="1">
                                            <div>
                                                <span style="color: white; font-family: Comic Sans MS; font-size: 18px; float: left; margin-left: 10px; margin-top: 10px;">
                                                    <b>Name:</b>
                                                    #{notificationView.selectedNotification.event.name}
                                                    <br /><br />
                                                    <b>Privacy:</b>
                                                    #{notificationView.selectedNotification.event.privateString}
                                                    <br /><br />
                                                    <b>Indoor:</b>
                                                    #{notificationView.selectedNotification.event.indoorString}
                                                    <br /><br />
                                                    <b>Start time:</b>
                                                    #{notificationView.selectedNotification.event.starttime}
                                                    <br /><br />
                                                    <b>End time:</b>
                                                    #{notificationView.selectedNotification.event.endtime}
                                                    <br /><br />
                                                    <b>Place:</b>
                                                    #{notificationView.selectedNotification.event.place}
                                                    <br /><br />
                                                    <b>Description:</b>
                                                    <div style="width: 450px; overflow-y: scroll">
                                                        <p>#{notificationView.selectedNotification.event.description}</p>
                                                    </div>
                                                    <b>Weather:</b>
                                                    <p:graphicImage id="weatherIcon" value="#{notificationView.retrieveCorrectUrl(notificationView.selectedNotification.event)}" style="float: left; margin-left: 20px;"/>
                                                        <span style="color: white; font-family: Comic Sans MS; font-size: 18px; float: left; margin-left: 10px;">
                                                            <b>#{notificationView.selectedNotification.event.retrieveNameCondition()}</b>
                                                        <br />
                                                        <b>Min. Temperature:</b>
                                                        #{notificationView.selectedNotification.event.retrieveMinTemp()}
                                                        <br />
                                                        <b>Max. Temperature:</b>
                                                        #{notificationView.selectedNotification.event.retrieveMaxTemp()}
                                                        </span>
                                                </span>
                                            </div>
                                        </h:panelGrid>
                                        <h:panelGrid columns="1" style="margin-left: 35px; background: none">
                                            <div id="organizer_container">
                                                <div id="organizer_header">
                                                    <h1>Organizer</h1>
                                                </div>
                                                <p:panelGrid columns="2">
                                                    <f:facet name="header">
                                                        <a href="#{notificationView.resultUrl()}">
                                                            <p:graphicImage id="avatarImg" value="#{notificationView.userAvatar}" cache="false" style="width:250px; height:250px;">
                                                            <f:param name="id" value="#{notificationView.selectedNotification.event.owner.email}" />
                                                        </p:graphicImage>
                                                        </a>
                                                    </f:facet>

                                                    <h:outputText value="Name:" />
                                                    <h:outputText value="#{notificationView.selectedNotification.event.owner.name}" />

                                                    <h:outputText value="Surname:" />
                                                    <h:outputText value="#{notificationView.selectedNotification.event.owner.surname}" />

                                                    <h:outputText value="Email:" />
                                                    <h:outputText value="#{notificationView.selectedNotification.event.owner.email}" />

                                                    <h:outputText value="Phone:" />
                                                    <h:outputText value="#{notificationView.selectedNotification.event.owner.phone}" />
                                                </p:panelGrid>
                                            </div>
                                        </h:panelGrid>
                                    </h:panelGrid>
                                    <p:commandButton id="submit" value="Accept" disabled="#{!scheduleView.isInTheParticipantsList(ub.currentUser, notificationView.selectedNotification.event)}" 
                                                     style="width: 200px; margin-top: 30px; margin-left: 310px; margin-bottom: 10px; border:0; box-shadow:0px 2px 5px #000000; 
                                                         float: left; background: #6cb364; color: white; font-family: Comic Sans MS;"
                                                         action="#{eb.acceptInvitation(notificationView.selectedNotification.event, ub.currentUser)}"/>
                                   
                                </h:panelGrid>
                            </div>
                        </p:dialog>
                    </h:form>
                </div>
            </div>
        </div>
        <div id="footer">
            <p>Software engineering 2</p>
            Project 2014-2015<br />
            Rimoldi_Lattari<br />
            <p></p>
        </div>
    </div>
</h:body>
</html>